<script setup>
import router from '@/router'

const props = defineProps({
  imgUrl: String,
  to: String,
  title: String,
  text: String,
  filter: String,
  avatar: String
})

const navigate = () => {
  props.to && router.push(props.to)
}
</script>

<template>
  <button v-if="imgUrl" class="btn img-button" @click="navigate" :title>
    <img :src="imgUrl" />
  </button>
  <button v-else-if="text" class="btn text-button" @click="navigate" :title>
    {{ text }}
  </button>
  <button v-else-if="avatar" class="btn avatar-button" :title @click="navigate">
    <img :src="avatar" />
  </button>
  <button v-else class="btn filter-button">{{ filter }}</button>
</template>

<style scoped lang="scss">
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: none;
  outline: none;
  background-color: var(--theme-color);
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.3s ease;

  &:disabled {
    &:hover {
      background-color: var(--theme-color);
    }
    cursor: not-allowed;
  }

  &.img-button {
    width: 50px;
  }

  &.text-button {
    padding: 0 20px;
    font-size: 15px;
  }

  &.avatar-button {
    background-color: transparent;

    img {
      width: 50px;
    }

    &:hover {
      background-color: transparent;
    }
  }

  &.filter-button {
    padding: 0 16px;
    font-size: 15px;
  }

  &:hover {
    background-color: var(--btn-hover-color);
  }
}
</style>
